<script setup>
    import {ref} from 'vue'
    import  {useCartStore}  from '@/stores/cart.js';

    const props = defineProps(['nearList','shopName'])
    const cart = useCartStore()

    const addBut = (res)=>{
        res.number++

        let judCart = cart.cartList.find(ele => {
            return ele.name === props.shopName
        })

        // 判断购物车是否存在
        if (!judCart) {
            cart.cartList.push({name:props.shopName,list:[res]})
        }else{
            // 判断商品是否存在
            let judList = judCart.list.find(ele => {
                return ele.id === res.id
            })

            if(!judList){
                judCart.list.push(res)
            }
        }
    }


    const subBut = (res)=>{
        if (res.number > 0) {
            res.number--
        }

        if (res.number === 0) {
            let judCart = cart.cartList.find(ele => {
                return ele.name === props.shopName
            })
            
            if (judCart && judCart.list.length !== 0) {
                judCart.list = judCart.list.filter(ele => ele.id !== res.id)
            }
        }
    }


</script>

<template>
     <!-- v-for="item,index in nearList.category" :key="index" -->
    <div class="product" v-for="item,index in nearList" :key="index">
        <div class="product_img">  <!-- <div class="product_img--min"> -->
            <img :src="`http://www.dell-lee.com/imgs/vue3/${item.imgName}.png`" alt="">
        </div>
        <div class="product_content">
            <div class="product_content_title">{{item.title}}</div>
            <div class="product_content_sales">月售 {{ item.sales }} 件</div>
            <slot></slot>
            <div class="product_content_price">￥{{item.price}} <span class="product_content_old_price">￥{{item.oldPrice}}</span></div>
            
        </div>
        <div class="product_number">
            <span class="product_number_minus" @click="subBut(item)">-</span>
            {{item.number}}
            <span class="product_number_plus" @click="addBut(item)">+</span>
        </div>
    </div>
</template>

<style lang="scss" scoped>
@import '@/style/viriables.scss';
@import '@/style/mixins.scss';
.product {
    padding: .18rem;
    box-sizing: border-box;
    display: flex;
    position: relative;
    border-bottom: .01rem solid $content-bgColor;

    &_img {
        width: .68rem;
        margin-right: .18rem;

        img {
            width: .68rem;
            height: .68rem;
        }
    }
    &_img--min {
        width: .48rem;
        margin-right: .18rem;

        img {
            width: .48rem;
            height: .48rem;
        }
    }
    &_content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        &_title {
            font-size: .14rem;
            font-weight: bold;
            color: $content_fontcolor;
            @include ellipse;
        }
        &_price {
            color: $hightlight-fontColor;
        }
        &_old_price {
            color: $light-fontColor;
            text-decoration: line-through;
        }
    }
    &_number {
        position: absolute;
        right: .18rem;
        bottom: .18rem;

        &_minus,&_plus {
            display: inline-block;
            width: .2rem;
            height: .2rem;
            border-radius: 50%;
            font-size: .16rem;
            text-align: center;
        }
        &_minus {
            border: .01rem solid $medium-fontColor;
            color: $medium-fontColor;
            margin-right: .08rem;
        }
        &_plus {
            background-color: $btn-bgColor;
            color: $bgColor;
            margin-left: .08rem;
        }
    }
}
</style>